// pages/my-active/my-active.js
// import F2 from '@antv/f2';
Page({
  /**
   * 页面的初始数据
   */
  data: {
    menu_list: [{
      name: '发布',
      id: 0
    }, {
      name: '参加',
      id: 1
    }, {
      name: '获奖',
      id: 2
    }, {
      name: '撤销',
      id: 3
    }, {
      name: '榜单',
      id: 4
    }, ],
    active_list: [],
    show_list: [], // 实际展示的列表
    pageSize: 3, // 每页显示数量
    currentPage: 1, // 当前页码
    hasMore: true, // 是否有更多数据
    user_id: '',
    selected_id: 0,
    Bardata: [],
    showChart:true,
    // 统计图---柱状图---活动热度表
    onInitChartBar: async (F2, config) => {
      const chart = new F2.Chart(config);

      // 获取数据
      const db = wx.cloud.database();
      const _ = db.command;
      const {
        data
      } = await db.collection('actives')
        .where({
          isDeleted: _.neq(true)
        })
        .field({
          name: true,
          views: true
        })
        .get();

      // 转换数据
      const Bardata_active = data.map(item => ({
        name: item.name,
        views: Number(item.views) // 确保转换为数字
      }));

      // 配置数据源和 Scale
      chart.source(Bardata_active, {
        name: {
          type: 'cat'
        }, // 分类类型
        views: {
          tickCount: 5
        } // 线性类型（默认）
      });

      // 配置 Tooltip
      chart.tooltip({
        showItemMarker: false,
        onShow: function onShow(ev) {
          const items = ev.items;
          items[0].name = null;
          items[0].name = items[0].title;
          items[0].value = '热度：' + items[0].value;
        }
      });

      // 绘制柱状图
      chart.interval().position('name*views');
      chart.render();

      return chart;
    },
    // 统计图数据---折线
    onInitChartLine: async (F2, config) => {
      const chart = new F2.Chart(config);
      const db = wx.cloud.database();
      const _ = db.command;
      const $ = db.command.aggregate;

      // Step 1: 获取聚合数据
      const {
        list
      } = await db.collection("active_user") // 修正变量名为 data
        .aggregate()
        .match({
          isDeleted: _.neq(true),
          isRevoke: _.neq(true)
        })
        .group({
          _id: '$nickName',
          count: $.sum(1),
          name: $.first('$nickName') // 保留 name 字段
        })
        .end();

      // Step 2: 转换数据格式
      const dataLine = list.map(item => ({
        name: item.name, // X 轴字段: name（昵称）
        count: item.count // Y 轴字段: count（数量）
      }));
      console.log("折线图数据:", dataLine);

      // Step 3: 配置数据源与 Scale
      chart.source(dataLine, {
        count: { // Y 轴字段名改为 count
          tickCount: 5,
          min: 0
        },
        name: { // X 轴字段名改为 name
          type: 'cat', // 分类类型，而非时间类型
          range: [0, 1],
          tickCount: 3
        }
      });

      // Step 4: 绘制折线图
      chart.line().position('name*count'); // 修正字段绑定
      chart.render();

      return chart;
    },
    // 统计图数据---饼状图
    onInitChartRound: async (F2, config) => {
      // 创建一个 F2 图表实例
      const chart = new F2.Chart(config);

      // 获取微信小程序的云数据库实例
      const db = wx.cloud.database();
      const _ = db.command; // 用于构建查询条件
      const $ = db.command.aggregate; // 用于聚合操作

      // 从云数据库的 "actives" 集合中查询数据
      // 使用聚合操作，筛选出未被删除的记录，并按发布者分组统计数量
      const {
        list
      } = await db.collection("actives")
        .aggregate()
        .match({
          isDeleted: _.neq(true), // 筛选条件：isDeleted 不等于 true
        })
        .group({
          _id: '$publisher', // 按发布者分组
          count: $.sum(1), // 统计每个分组的数量
          name: $.first('$publisher') // 保留发布者的名称字段
        })
        .end(); // 执行聚合查询

      // 打印查询结果
      console.log('数据', list);

      // 将查询结果转换为饼状图所需的数据格式
      const dataRound = list.map(item => {
        return {
          name: item.name, // 发布者名称
          count: item.count, // 发布者对应的数量
          const: 'const'
        };
      });
      // 计算总数，用于后续计算百分比
      const count_total = dataRound.reduce((acc, item) => {
        return acc + item.count; // 累加每个分组的数量
      }, 0);
      // 创建 map 对象
      const map = {};
      dataRound.forEach(item => {
        // 动态添加键值对
        map[item.name] = `${(item.count / count_total * 100).toFixed(2)}%`;
      });
      const data = dataRound.map(item => {
        return {
          name: item.name,
          percent: item.count / count_total,
          a: '1' // 添加常量字段，用于饼图数据映射
        }
      })

      // 打印总数
      console.log("总数", count_total, "dataRound", dataRound, 'map', map, "data", data);
      // 配置图表的数据源和 Scale
      chart.source(data, {
        percent: {
          // 定义一个自定义的 Scale，用于将数量转换为百分比
          formatter: function formatter(val) {
            // return (val / count_total) * 100 + '%'; // 将数量转换为百分比格式
            return val * 100 + '%';
          }
        }
      });

      // 配置图例
      chart.legend({
        position: 'right', // 图例位置在右侧
        itemFormatter: function itemFormatter(val) {
          return val + '  ' + map[val]; // 自定义图例显示内容，这里假设 map 是一个映射对象
        }
      });

      // 关闭图表的提示框功能
      chart.tooltip(false);

      // 配置极坐标系，用于生成饼状图
      chart.coord('polar', {
        transposed: true, // 转置坐标系
        radius: 0.85 // 设置饼状图的半径比例
      });

      // 关闭坐标轴
      chart.axis(false);

      // 配置柱状图（在极坐标系下表现为饼状图的扇形）
      chart.interval()
        .position('a*percent') // 指定数据映射的字段，这里假设 'a' 是一个占位字段
        .color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0']) // 按发布者名称分配颜色
        .adjust('stack') // 设置堆叠模式
        .style({
          lineWidth: 1, // 设置扇形边框宽度
          stroke: '#fff', // 设置扇形边框颜色
          lineJoin: 'round', // 设置边框的连接方式
          lineCap: 'round' // 设置边框的端点样式
        })
        .animate({
          appear: {
            duration: 1200, // 动画持续时间
            easing: 'bounceOut' // 动画效果
          }
        });

      // 渲染图表
      chart.render();

      // 返回图表实例
      return chart;
    },
  },

  // 获取用户发布的活动
  user_active() {
    // 进入页面时显示加载提示
    wx.showLoading({
      title: '加载中...',
      mask: true // 可选：添加遮罩层防止误操作
    });
    // 这里要初始化,方便加载效果
    this.setData({
      active_list: [],
      show_list: [],
      currentPage: 1,
      hasMore: true
    })
    const db = wx.cloud.database()
    // 执行查询、更新等操作时，需要用它来生成特定操作指令。
    const _ = db.command
    db.collection('actives')
      .where({
        publisher_id: this.data.user_id,
        isDeleted: _.neq(true) // 数据库层面过滤已删除
      })
      .get()
      .then(res => {
        console.log('有效活动数据:', res.data)
        // 客户端二次过滤（可选）
        // const validList = res.data.filter(item =>
        //   !item.hasOwnProperty('isDeleted') || item.isDeleted !== true
        // )
        const active_list = res.data
        this.setData({
          active_list,
          show_list: res.data.slice(0, this.data.pageSize),
        },()=>{
          wx.hideLoading()
        })
        console.log("这里是展示的数据", this.data.show_list)
      })
      .catch(err => {
        console.error('数据请求失败', err)
        wx.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        })
        wx.hideLoading()
      })

  },
  // 获取用户报名的活动
  signUp_active() {
    // 进入页面时显示加载提示
    wx.showLoading({
      title: '加载中...',
      mask: true // 可选：添加遮罩层防止误操作
    });
    // 这里要初始化,方便加载效果
    this.setData({
      active_list: [],
      show_list: [],
      hasMore: true,
      currentPage: 1,
    })
    const db = wx.cloud.database()
    // 执行查询、更新等操作时，需要用它来生成特定操作指令。
    const _ = db.command
    // 登录用户参加过的活动
    db.collection('active_user').where({
        user_id: this.data.user_id,
        isRevoke: _.neq(true), // 用户撤销的报名
        isDeleted: _.neq(true) // 活动删除
      })
      .get({
        success: (res) => {
          // 在页面JS文件顶部初始化
          const db = wx.cloud.database();
          const _ = db.command; // 关键！引入数据库操作符
          const active_list = res.data;

          // 1.这里拿到了用户报名过的活动的id
          const sign_active_ids = active_list.map(item => item.active_id);
          console.log('本人报名过的：', res.data, "本人报名过的活动id：", sign_active_ids)
          // 2.还需要通过活动的id去查找
          // 方法二：效率高，一次请求
          db.collection('actives')
            .where({
              _id: _.in(sign_active_ids)
            })
            .get()
            .then(res => {
              if (res.data.length === 0) {
                console.log('未找到匹配的活动');
                return;
              }
              // 处理查询到的数据
              console.log('活动数据:', res.data);
              const active_list = res.data;
              this.setData({
                active_list,
                show_list: res.data.slice(0, this.data.pageSize)
              },()=>{
                wx.hideLoading()
              })
              // this.bottomFun()
            })
            .catch(err => {
              console.error('查询失败:', err);
              // 可在此处提示用户网络错误
              wx.showToast({
                title: '数据加载失败',
                icon: 'error'
              });
              wx.hideLoading()
            })
        },
        fail(err) {
          console.log('数据请求失败', err)
          wx.hideLoading()
        }
      })
    // wx.hideLoading()
  },
  // 获取用户获奖的活动列表
  win_active() {
    // 进入页面时显示加载提示
    wx.showLoading({
      title: '加载中...',
      mask: true // 可选：添加遮罩层防止误操作
    });
    // 这里要初始化,方便加载效果
    this.setData({
      active_list: [],
      show_list: [],
      hasMore: true,
      currentPage: 1,
    })
    const db = wx.cloud.database()
    // 执行查询、更新等操作时，需要用它来生成特定操作指令。
    const _ = db.command
    // 登录用户参加过的活动
    db.collection('active_user').where({
        user_id: this.data.user_id,
        isWin: true // 数据库层面过滤已删除
      })
      .get({
        success: (res) => {
          if (res.data.length === 0) {
            console.log('未找到匹配的活动');
            return;
          }
          // 在页面JS文件顶部初始化
          const db = wx.cloud.database();
          const _ = db.command; // 关键！引入数据库操作符
          const active_list = res.data;

          // 1.这里拿到了用户报名过的活动的id
          const sign_active_ids = active_list.map(item => item.active_id);
          console.log('本人报名过的：', res.data, "本人获奖过的活动id：", sign_active_ids)
          // 2.还需要通过活动的id去查找
          // 方法二：效率高，一次请求
          db.collection('actives')
            .where({
              _id: _.in(sign_active_ids)
            })
            .get()
            .then(res => {
              if (res.data.length === 0) {
                console.log('未找到匹配的活动');
                return;
              }
              // 处理查询到的数据
              console.log('活动数据:', res.data);
              const active_list = res.data;
              this.setData({
                active_list,
                show_list: res.data.slice(0, this.data.pageSize)
              },()=>{
                wx.hideLoading()
              })
            })
            .catch(err => {
              console.error('查询失败:', err);
              // 可在此处提示用户网络错误
              wx.showToast({
                title: '数据加载失败',
                icon: 'error'
              });
            })
        },
        fail(err) {
          console.log('数据请求失败', err)
          wx.hideLoading()
        }
      })
  },
  // 获取用户撤销的活动列表
  revoke_list() {
    // 进入页面时显示加载提示
    wx.showLoading({
      title: '加载中...',
      mask: true // 可选：添加遮罩层防止误操作
    });
    this.setData({
      active_list: [],
      show_list: [],
      hasMore: true,
      currentPage: 1,
    });

    const db = wx.cloud.database();
    const _ = db.command;

    // 1. 修复查询条件：获取用户撤销的活动关联记录
    db.collection('active_user')
      .where({
        user_id: this.data.user_id,
        isRevoke: true,
        isDeleted: _.neq(true) // 补充删除状态过滤
      })
      .get()
      .then(res => {
        if (res.data.length === 0) {
          wx.hideLoading();
          this.setData({
            active_list: [],
            show_list: [],
            hasMore: true,
            currentPage: 1,
          }); // 明确设置空列表
          wx.showToast({
            title: '暂无撤销活动',
            icon: 'none'
          });
          return;
        }

        // 2. 修正活动ID提取逻辑
        const activeIds = res.data.map(item => item.active_id); // 直接提取ID数组

        // 3. 修复 actives 查询条件
        db.collection('actives')
          .where({
            _id: _.in(activeIds), // 正确使用 _.in 查询
            isDeleted: _.neq(true)
          })
          .get()
          .then(res => {
            if (res.data.length === 0) {
              wx.showToast({
                title: '活动已删除',
                icon: 'none'
              });
              return;
            }
            // 4. 正确合并数据
            this.setData({
              active_list: res.data,
              show_list: res.data.slice(0, this.data.pageSize)
            },()=>{
              wx.hideLoading()
            });
            // this.bottomFun()
          })
          .catch(err => {
            console.error('活动查询失败', err);
            wx.showToast({
              title: '加载失败',
              icon: 'none'
            });
          })
      })
      .catch(err => {
        console.error('关联记录查询失败', err);
        wx.showToast({
          title: '加载失败',
          icon: 'none'
        });
        wx.hideLoading();
      });
  },
  // 删除自己发布的活动
  // 删除活动方法（安全增强版）
  delete(e) {
    const delete_id = e.currentTarget.dataset.info;
    // 1. 用户确认弹窗
    wx.showModal({
      title: '确认删除',
      content: '确定要删除此活动吗？该操作不可撤销',
      success: (res) => {
        if (res.confirm) {
          // 显示加载状态
          wx.showLoading({
            title: '删除中...'
          });
          // 2. 通过云函数进行删除
          wx.cloud.callFunction({
            name: 'delete_active',
            data: {
              activeId: delete_id
            },
            success: (res) => {
              console.log('云函数删除成功', res);
              wx.hideLoading();
              wx.showToast({
                title: '删除成功',
                icon: 'success',
                duration: 2000
              });

              // 3. 更新页面数据
              this.user_active() // 用户发布过的活动列表
              this.signUp_active() // 用户报名过的活动列表
            },
            fail: (err) => {
              console.error('删除失败', err);
              wx.hideLoading();
              wx.showToast({
                title: '删除失败',
                icon: 'error',
                duration: 2000
              });
            }
          });
        }
      }
    });
  },
  // 撤销用户报名过的方法
  revoke(e) {
    const delete_id = e.currentTarget.dataset.info;
    // 1. 用户确认弹窗
    wx.showModal({
      title: '确认撤销',
      content: '确定要取消报名吗？该操作不可撤销',
      success: (res) => {
        if (res.confirm) {
          // 显示加载状态
          wx.showLoading({
            title: '撤销中...'
          });
          // 2. 通过云函数进行删除
          wx.cloud.callFunction({
            name: 'revoke_active',
            data: {
              activeId: delete_id
            },
            success: (res) => {
              console.log('云函数删除成功', res);


              // 3. 更新页面数据
              this.signUp_active()
              wx.hideLoading();
              wx.showToast({
                title: '撤销成功',
                icon: 'success',
                duration: 2000
              });
            },
            fail: (err) => {
              console.error('删除失败', err);
              wx.hideLoading();
              wx.showToast({
                title: '删除失败',
                icon: 'error',
                duration: 2000
              });
            }
          });
        }
      }
    });
  },
  // 导航栏点击事件
  click_menu(e) {
    console.log(e)
    const selected_id = e.currentTarget.dataset.id
    this.setData({
      selected_id,
    })
    if (selected_id == 0) {
      this.user_active()
    }
    if (selected_id == 1) {
      this.signUp_active()
    }
    if (selected_id == 2) {
      this.win_active()
    }
    if (selected_id == 3) {
      this.revoke_list()
    }
  },
  // 前往活动详情
  view_detail(e) {
    console.log(e)
    const _id = e.currentTarget.dataset.info._id
    const db = wx.cloud.database()
    const _ = db.command
    // 使用 inc 原子操作符递增 views
    db.collection('actives').doc(_id).update({
      data: {
        views: _.inc(1) // 原子递增1，无需查询当前值
      },
      success(res) {
        console.log("活动浏览量+1", res);
      },
      fail(err) {
        console.error("更新失败", err);
      }
    });
    wx.navigateTo({
      url: `/pages/active_detail/detail?_id=${_id}`,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
     // 进入页面时显示加载提示
     wx.showLoading({
      title: '加载中...',
      mask: true // 可选：添加遮罩层防止误操作
    });
    console.log(options)
    // options 中包含 URL 查询参数
    const user_id = options.user_id;
    const click_id = options.click_id
    // 将 user_id 设置到页面数据中
    this.setData({
      user_id: user_id,
      selected_id: Number(click_id)
    },()=>{
      wx.hideLoading();
    });
    wx.setNavigationBarTitle({
      title: '个人中心-活动',
    })
    if (this.data.selected_id == 0) {
      this.user_active()
    }
    if (this.data.selected_id == 1) {
      this.signUp_active()
    }
    if (this.data.selected_id == 2) {
      this.win_active()
    }
    if (this.data.selected_id == 3) {
      this.revoke_list()
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  // 触底时触发的方法
  bottomFun() {
    console.log(1111, this.data.hasMore)
    if (!this.data.hasMore) return;

    const nextPage = this.data.currentPage + 1;
    const start = this.data.currentPage * this.data.pageSize;
    const end = nextPage * this.data.pageSize;

    this.setData({
      show_list: [...this.data.show_list, ...this.data.active_list.slice(start, end)],
      currentPage: nextPage,
      hasMore: end < this.data.active_list.length
    },()=>{
      wx.stopPullDownRefresh()
    });
    console.log(1111, this.data.hasMore)
  },
  // 触底加载更多
  // onReachBottom() {
  //   this.bottomFun()
  // },
  // 下拉刷新
  onPullDownRefresh() {
    this.bottomFun()
    //当数据重置成功之后，调用此函数，关闭下拉刷新效果
    // wx.stopPullDownRefresh()
  },

  // 懒加载的问题
  onImagesLoaded() {
    console.log("数据加载完成", this.data)
    // 在图片加载完成后，设置 showImage 为 true，显示图片
    this.setData({
      showChart: false
    })
  },
  onImageError: () => {
    console.error('图片加载失败')
  }
})